<template>
	<!-- 弹出的选择 -->
	<view class="durk" @click.stop="closeModel">
		<view class="select" @click.stop="noClose">
			<view class="input-row border" v-show="index<=(type==0?2:3)" v-for="(item,index) in form" :key="index">
				<view class="title">{{item.name}}：</view>
				<m-input :form="form" :type="item.type" :focus="item.focus" :displayable="item.displayable" :check="item.check"
				 clearable v-model="form[index].value" :placeholder="'请输入'+item.name"></m-input>
			</view>
			<view class="btn-row">
				<button type="primary" class="primary btn-primary" @tap="check">{{type==0?'登录':(type==1?'注册':'找回密码')}}</button>
			</view>
			<view class="action-row">
				<template v-if="type!=1">
					<view @tap="type=1">注册账号</view>
					<text>|</text>
					<view @tap="type=2">忘记密码</view>
				</template>
				<template v-if="type==1">
					<view @tap="type=0">已有账号，立刻登录</view>
				</template>
			</view>
		</view>
	</view>
</template>
<script>
	import mInput from '../../components/m-input.vue';
	import { isPoneAvailable } from '@/utils/reg.js';
	import { h5Login,h5Reg,h5Password } from '@/service/loginOrReg.js';
	import { sha1 } from '@/utils/sha1.js';
	export default {
		name: 'LoginByPc',
		components: {
			mInput
		},
		data() {
			return {
				type: 0, //  0 登录  1 注册 2 找回密码
				form: [
					{name: '手机号',type: 'text',value: '13178786022',focus: true},
					{name: '密码',type: 'password',value: '123456',displayable: true},
					{name: '确认密码',type: 'password',value: '123456',displayable: true},
					{name: '验证码',type: 'text',value: '',check: true}
				]
			}
		},
		methods: {
			noClose() { // 阻止弹窗关闭
				return false
			},
			closeModel() { // 关闭弹窗
				this.$emit('showOrHide');
			},
			check() { // 检查填写项
				let title = '';
				let checkObj = this.form
				if (!checkObj[0].value) {
					title = '请输入' + checkObj[0].name
				} else if (!isPoneAvailable(checkObj[0].value)) {
					title = '请检查手机号码'
				} else if (!checkObj[1].value) {
					title = '请输入' + checkObj[1].name
				} else if (this.type!=0) {
					if (checkObj[1].value.length < 6) {
						title = '密码长度不能小于6位'
					} else if (!checkObj[2].value) {
						title = '请输入' + checkObj[2].name
					} else if (checkObj[1].value != checkObj[2].value) {
						title = '两次密码不一致'
					} else if (!checkObj[3].value) {
						title = '请输入' + checkObj[3].name
					} 
					// else if (checkObj[3].value.length!=6) {
					// 	title = '验证码错误'
					// }
				}
				if (title) {
					this.showToast(title,'none')
				} else {
					this.bindLogin(this.type)
				}
			},
			bindLogin(type) { //登录 注册
				let form = this.form;
				let text = type==0?'登录':(type==1?'注册':'找回密码');
				let send = '';
				if(type==0){ // 登录
					send = h5Login(form[0].value,sha1(form[1].value))
				}else if (type==1) { // 注册
					send = h5Reg(form[0].value,form[3].value,sha1(form[1].value))
				}else{ // 找回密码
					send = h5Password(form[0].value,form[3].value,sha1(form[1].value))
				}
				send.then(res=>{
					if(res.code==200){
						this.setToken(res.data.token)
						this.showToast(text+'成功',true)
						if(type==0){ // 登录的关闭模态框
							this.closeModel()	
						}else{ // 注册或找回密码的 成功后转为登录
							this.form.forEach(e=>{e.value = ''})
							this.type = 0
						}
					}
				}).catch(err=>{
					this.showToast(text+'失败','none')
				})
			},
			showToast(title,icon){
				uni.showToast({title,icon})
			}
		}
	}
</script>
<style scoped>
	.title {
		font-size: 34rpx;
	}

	.input-group {
		background-color: #ffffff;
		margin-top: 20px;
		position: relative;
	}

	.input-group::before {
		position: absolute;
		right: 0;
		top: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}

	.input-group::after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}

	.input-row {
		display: flex;
		flex-direction: row;
		position: relative;
		font-size: 18px;
		line-height: 80px;
	}

	.input-row .title {
		/* width: 72px; */
		text-align: right;
		padding-left: 15px;
	}

	.input-row.border::after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 8px;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}

	.select {
		width: 630rpx;
		height: 1060rpx;
		background-color: #fff;
		position: absolute;
		bottom: 0;
		left: 0;
		border-top-left-radius: 120rpx;
		border-top-right-radius: 120rpx;
		right: 0;
		padding-top: 108rpx;
		padding-left: 120rpx;
		font-size: 36rpx;
	}

	.select>view {
		width: 520rpx;
	}

	.btn-row {
		margin-top: 25px;
		padding: 10px;
	}

	.action-row {
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		font-size: 28rpx;
	}

	.action-row view {
		color: #C89B4E;
		padding: 0 10px;
	}
</style>
